<template>
  <el-tabs type="border-card" class="tab-container">
    <el-tab-pane>
      <span slot="label"><i class="el-icon-date" /> 概念</span>
      <el-row>
        <el-col :span="2" class="row-title">基本概念：</el-col>
        <el-col
          :span="22"
          class="row-content"
        >编写一份正式批准项目并授权项目经理在项目活动中使用组织资源的文件的过程。</el-col>
      </el-row>
      <el-row>
        <el-col :span="2" class="row-title">过程要点：</el-col>
      </el-row>
      <el-row class="row-content">
        <el-col :span="2" class="row-content-blank">.</el-col>
        <el-col
          :span="22"
          class="row-content-list"
        >1. 明确项目要做什么，确认主要的项目可交付物；</el-col>
      </el-row>
      <el-row class="row-content">
        <el-col :span="2" class="row-content-blank">.</el-col>
        <el-col
          :span="22"
          class="row-content-list"
        >2. 分析启动项目的原因及项目的可行性；</el-col>
      </el-row>
      <el-row class="row-content">
        <el-col :span="2" class="row-content-blank">.</el-col>
        <el-col
          :span="22"
          class="row-content-list"
        >3. 分析项目为组织带来的商业价值；</el-col>
      </el-row>
      <el-row class="row-content">
        <el-col :span="2" class="row-content-blank">.</el-col>
        <el-col
          :span="22"
          class="row-content-list"
        >4. 明确项目的总体目标及成功标准；</el-col>
      </el-row>
      <el-row class="row-content">
        <el-col :span="2" class="row-content-blank">.</el-col>
        <el-col
          :span="22"
          class="row-content-list"
        >5. 分析项目内外部环境及高层级的风险与假设条件；</el-col>
      </el-row>
      <el-row class="row-content">
        <el-col :span="2" class="row-content-blank">.</el-col>
        <el-col
          :span="22"
          class="row-content-list"
        >6. 确定项目的正式地位及项目经理的正式权力；</el-col>
      </el-row>
      <el-row class="row-content">
        <el-col :span="2" class="row-content-blank">.</el-col>
        <el-col
          :span="22"
          class="row-content-list"
        >7.
          由发起人批准，明确高层对项目的支持，项目章程不批准，项目经理最好不要干活；</el-col>
      </el-row>
      <el-row class="row-content">
        <el-col :span="2" class="row-content-blank">.</el-col>
        <el-col
          :span="22"
          class="row-content-list"
        >8.
          项目章程不可太粗（失去指导意义）或太细（以免执行过程中微小的变更就带来章程的修订）；</el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="输入">
      <el-tabs
        :tab-position="inputTabPosition"
        style="height: 680px; margin-top: 20px"
      >
        <el-tab-pane label="商业论证">
          <el-row>
            <el-col :span="2" class="row-title">描述：</el-col>
            <el-col
              :span="22"
              class="row-content"
            >提供项目的理由、通过收益分析确定项目的合理性。</el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="row-title">详细描述：</el-col>
            <el-col
              :span="22"
              class="row-content"
            >商业论证是对一个项目投资的有效性证明。简单来讲，在一个项目被批准之前，管理高层需要确认对这个项目的投资是有价值的、值得的。换句话说，完成这个项目所能带来的收益必须明确，并且尽可能的量化。商业论证的主要内容就包括了对项目收益的量化定义，投资商（项目赞助商）在认可这样的一个商业论证之前是不应该在这个项目中投入任何资源的。</el-col>
          </el-row>

          <el-row>
            <el-col :span="2" class="row-title">图片：</el-col>
          </el-row>
          <el-row class="row-content">
            <el-col :span="2" class="row-content-blank">.</el-col>
            <el-col :span="22" />
            <el-image
              style="width: 100px; height: 100px"
              :src="picUrl"
              :preview-src-list="pricSrcList"
            />
          </el-row>

          <el-row>
            <el-col :span="2" class="row-title">附件：</el-col>
            <el-col :span="22" class="row-content">
              <i class="el-icon-paperclip" />
              <span>可行性分析报告.docx </span></el-col>
          </el-row>

          <el-row>
            <el-col :span="2" class="row-title">外链链接：</el-col>
            <el-col :span="22" class="row-content">
              <el-link
                ref="https://baike.baidu.com/item/%E5%95%86%E4%B8%9A%E8%AE%BA%E8%AF%81/1929545?fr=aladdin"
                type="primary"
              >https://baike.baidu.com/item/%E5%95%86%E4%B8%9A%E8%AE%BA%E8%AF%81/1929545?fr=aladdin</el-link></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="效益管理计划">效益管理计划（界面同前）</el-tab-pane>
        <el-tab-pane label="协议">协议（界面同前）</el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="工具与技术">
      <el-tabs
        :tab-position="inputTabPosition"
        style="height: 680px; margin-top: 20px"
      >
        <el-tab-pane label="专家判断">
          <el-row>
            <el-col :span="2" class="row-title">描述：</el-col>
            <el-col
              :span="22"
              class="row-content"
            >专家判断是指基于某应用领域、知识领域、学科和行业等的专业知识而做出的，关于当前活动的合理判断，这些专业知识可来自具有专业学历、知识、技能、经验或培训经历的任何小组或个人。</el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="row-title">详细描述：</el-col>
            <el-col
              :span="22"
              class="row-content"
            >本过程应该就以下主题，考虑具备相关专业知识或接受过相关培训的个人或小组的意见：
              <br><br>· 组织战略； <br>· 益管理； <br>·
              关于项目所在的行业以及项目关注的领域的技术知识； <br>·
              持续时间和成本估算； <br>· 风险识别。
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="2" class="row-title">外链链接：</el-col>
            <el-col :span="22" class="row-content">
              <el-link
                ref="https://baike.baidu.com/item/%E5%95%86%E4%B8%9A%E8%AE%BA%E8%AF%81/1929545?fr=aladdin"
                type="primary"
              >https://baike.baidu.com/item/%E5%95%86%E4%B8%9A%E8%AE%BA%E8%AF%81/1929545?fr=aladdin</el-link></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="数据收集">数据收集（界面同前）</el-tab-pane>
        <el-tab-pane
          label="人际关系与团队"
        >人际关系与团队（界面同前）</el-tab-pane>
        <el-tab-pane label="会议">会议（界面同前）</el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="输出">
      <el-tabs
        :tab-position="inputTabPosition"
        style="height: 680px; margin-top: 20px"
      >
        <el-tab-pane label="项目章程">
          <el-row>
            <el-col :span="2" class="row-title">描述：</el-col>
            <el-col
              :span="22"
              class="row-content"
            >项目章程是由项目启动者或发起人发布的，正式批准项目成立，并授权项目经理使用组织资源开展项目活动的文件。</el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="row-title">详细描述：</el-col>
            <el-col
              :span="22"
              class="row-content"
            >它记录了关于项目和项目预期交付的产品、服务或成果的高层级信息，例如：<br><br>·
              项目目的；<br>· 可测量的项目目标和相关的成功标准；<br>·
              高层级需求；<br>·
              高层级项目描述、边界定义以及主要可交付成果；<br>·
              整体项目风险；<br>· 总体里程碑进度计划；<br>·
              预先批准的财务资源；<br>· 关键相关方名单；</el-col>
          </el-row>

          <el-row>
            <el-col :span="2" class="row-title">图片：</el-col>
          </el-row>
          <el-row class="row-content">
            <el-col :span="2" class="row-content-blank">.</el-col>
            <el-col :span="22" />
            <el-image
              style="width: 100px; height: 100px"
              :src="picUrl"
              :preview-src-list="pricSrcList"
            />
          </el-row>

          <el-row>
            <el-col :span="2" class="row-title">附件：</el-col>
            <el-col :span="22" class="row-content">
              <i class="el-icon-paperclip" />
              <span>项目章程.docx </span></el-col>
          </el-row>

          <el-row>
            <el-col :span="2" class="row-title">外链链接：</el-col>
            <el-col :span="22" class="row-content">
              <el-link
                ref="https://baike.baidu.com/item/%E5%95%86%E4%B8%9A%E8%AE%BA%E8%AF%81/1929545?fr=aladdin"
                type="primary"
              >https://baike.baidu.com/item/%E5%95%86%E4%B8%9A%E8%AE%BA%E8%AF%81/1929545?fr=aladdin</el-link></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="假设日志">假设日志（界面同前）</el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="练一练">
      <div style="margin-top:30px">
        <el-row style="text-align: left; font-weight: bold;">
          1. 项目经理参与项目章程的制定，他需要进一步进行项目的判断，下列哪一项是最好的主意？
        </el-row>
        <el-row style="text-align: left; padding-left:16px ">
          <br>A、会见发起人<br>B、收集组织过程资产，特别关注历史信息<br>C、参考商业文件<br>D、会见高级管理层
        </el-row>

        <el-row style="text-align: left; color:red; padding-top:10px">
          答案：C，制定项目章程需要商业文件作为指导，商业文件包括商业论证和效益管理计划；
        </el-row>
      </div>

      <div style="margin-top:30px">
        <el-row style="text-align: left; font-weight: bold;">
          2. 项目发起人没能及时对项目章程作出审批，你正在为项目编制资源计划，你几次拜访职能经理都被拒绝提供资源，第一次说太忙，第二次说部门正在做更重要的变革，导致你的项目进度延误，是什么原因导致了对你支持不够？
        </el-row>
        <el-row style="text-align: left; padding-left:16px ">
          <br>A、你在矩阵组织下工作，缺少权力<br>B、领导对项目不够重视<br>C、他不是项目的主要受益者<br>D、没有发布项目章程
        </el-row>

        <el-row style="text-align: left; color:red; padding-top:10px">
          答案：D，项目经理通过项目章程获得正式权力，如果项目章程不发布，尽量不要开始项目；
        </el-row>
      </div>

      <div style="margin-top:30px">
        <el-row style="text-align: left; font-weight: bold;">
          3. 项目经理参与项目章程的制定，他需要进一步进行项目的判断，下列哪一项是最好的主意？
        </el-row>
        <el-row style="text-align: left; padding-left:16px ">
          <br>A、会见发起人<br>B、收集组织过程资产，特别关注历史信息<br>C、参考商业文件<br>D、会见高级管理层
        </el-row>

        <el-row style="text-align: left; color:red; padding-top:10px">
          答案：C，制定项目章程需要商业文件作为指导，商业文件包括商业论证和效益管理计划；
        </el-row>
      </div>

    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'Detail',
  data() {
    return {
      inputTabPosition: 'right',
      picUrl:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.mianfeiwendang.com%2Fpic%2F770cd2e87a9c9f0289231819%2F1-810-jpg_6-1080-0-0-1080.jpg&refer=http%3A%2F%2Fwww.mianfeiwendang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013408&t=7867707cbadd49ebe27830f62fe3affc',
      pricSrcList: [
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.mianfeiwendang.com%2Fpic%2F770cd2e87a9c9f0289231819%2F1-810-jpg_6-1080-0-0-1080.jpg&refer=http%3A%2F%2Fwww.mianfeiwendang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013408&t=7867707cbadd49ebe27830f62fe3affc',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Foffer.imosi.com%2Fimages%2Fsupply_images%2F316_240_2013042616475884478643164.jpg&refer=http%3A%2F%2Foffer.imosi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013450&t=2aca551e3748b081df9bf297e572835a'
      ]
    }
  }
}
</script>

<style>
.tab-container {
  width: 100%;
  margin: 6px;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #ffd04b;
  background-color: #ffffff;
  border-right-color: #dcdfe6;
  border-left-color: #dcdfe6;
}
.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
  color: #ffd04b;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: #000;
}
.el-tab-pane > .el-row {
  margin-top: 30px;
}
.row-title {
  color: black;
  text-align: left;
  font-weight: bold;
}
.row-content {
  text-align: left;
  color: rgb(94, 92, 92);
}
.row-content-list {
  text-align: left;
}
.row-content-blank {
  color: rgba(255, 255, 255, 0);
}
.el-tabs__nav-scroll {
  height: 100%;
  text-align: left;
}
.el-tabs__item.is-active {
  color: #ffd04b;
}

.el-tabs__item:hover {
  color: #ffd04b;
}

.el-tabs__active-bar {
  background-color: #ffd04b;
}
</style>
